import React, { Component } from 'react';
import { Goback } from './Goback';
import instance from '../utils/axios';
import tool from '../utils/format'
import styled from 'styled-components'

const Box = styled.div`
.index {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.head {
    height: 40px;
    width: 100%;
    background-color: #dd3635;
    display: flex;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
}

.content {
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}


.content>ul>li {
    display: flex;
    height: 100px;
    border-bottom: 1px solid #f3f3f3;
    box-sizing: border-box;
    padding-top: 14px;
    padding-bottom: 14px;
}

.content>ul>li:last-child {
    border-bottom: 0;
}

.info {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}


.title {
    font-size: 18px;
    color: #222222;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.something {
    color: #a5a5a5;
    font-size: 12px;
}


.img {
    width: 115px;
    height: 72px;
    overflow: hidden;
}

.img>img {
    width: 100%;
}

.back_btn {
    color: #ffffff;
    font-size: 16px;
}

.back_btn::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-left: 3px solid #ffffff;
    border-top: 3px solid #ffffff;
    transform: rotate(-45deg);
}

.searchbox {
    height: 65px;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.searchbar {
    border: 1px solid #888888;
    height: 34px;
    border-radius: 5px;
    width: 100%;
    display: flex;
    align-items: center;
}

.searchbar>input {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    height: 32px;
    outline: none;
    text-indent: 10px;
    font-size: 16px;
    color: #c4c4c4;
}

.searchbar>span {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../images/search2.png) no-repeat;
    background-size: 70%;
    background-position: center;
    margin-right: 10px;
}`

class Search extends Component {

    state = {
        list: [],
        keyword: "",
        page: 1
    }

    changeInput = (event) => {
        this.setState({
            keyword: event.target.value
        })
    }

    handleScroll(event) {
        const { scrollTop, scrollHeight, clientHeight } = event.target;
        if (scrollTop + clientHeight > scrollHeight - 1) {
            this.setState({
                page: this.state.page + 1
            }, () => {
                instance.post("search", { keyword: this.state.keyword, page: this.state.page }).then(
                    (res) => {
                        let arr = this.state.list.concat(res)
                        console.log(arr);
                        this.setState({
                            list: arr
                        });
                    }, (err) => {
                        console.log(err);
                    })
            })
            console.log(this.state.page);
        }
    }

    getResult = () => {
        instance.post("search", { keyword: this.state.keyword }).then(
            (res) => {
                this.setState({ list: res, page: 1 }, console.log("on"))
            }, (err) => {
                console.log(err);
            });
    }

    render() {
        return (
            <Box>
                <div className="index">
                    <div className="head">
                        <Goback></Goback>
                    </div>

                    <div className="searchbox">
                        <div className="searchbar">
                            <input type="text" onChange={this.changeInput} />
                            <span onClick={this.getResult}></span>
                        </div>
                    </div>

                    <div className="content" onScroll={(e) => { this.handleScroll(e) }}>
                        <ul>
                            {
                                this.state.list.map((item) => {
                                    if (item.type === "财经") {
                                        return (
                                            <li key={item._id} onClick={() => {
                                                this.props.history.push('/newsinfo/' + item._id);
                                            }}>
                                                <div className="info">
                                                    <div className="title">{item.title}</div>
                                                    <div className="something">
                                                        <span className="m_r10">{item.media}-{item.type}</span>
                                                        <span>{tool.toYMD(item.pubtime)}</span>
                                                    </div>
                                                </div>
                                                <div className="img">
                                                    {item.img && item.img !== "none" ? <img src={item.img} /> : <div className="noimg">暂无缩略图</div>}
                                                </div>
                                            </li>
                                        )
                                    } else {
                                        return (
                                            <li key={item._id} onClick={() => {
                                                this.props.history.push('/newsinfo/' + item._id);
                                            }}>
                                                <div className="info">
                                                    <div className="title">{item.title}</div>
                                                    <div className="something">
                                                        <span className="m_r10">{item.source}-{item.type}</span>
                                                        <span>{tool.toYMD(item.time)}</span>
                                                    </div>
                                                </div>
                                                <div className="img">
                                                    <img src={item.img} />
                                                </div>
                                            </li>
                                        )
                                    }

                                })
                            }
                        </ul>
                    </div>

                </div></Box>
        )
    }
}
export default Search